import React, { Component } from 'react';
import { Form, Icon, Input, Button, Spin, Checkbox } from 'antd';
import { connect } from 'react-redux';
import { setUserInfo } from '@/redux/actions/userInfo';
import '@/assets/css/login';
import * as APIService from '../axios/api';
import * as utils from '../utils/action';
import img from '../assets/img/logo.png'
const FormItem = Form.Item;

class Login extends Component {
	state = {
		clientHeight: document.documentElement.clientHeight || document.body.clientHeight,
		loading: false,
		remember: false,
		rememberSize: {}
	};
	constructor(props) {
		super(props);
		this.onResize = this.onResize.bind(this);

	}
	UNSAFE_componentWillMount() {
		let remember = JSON.parse(localStorage.getItem('remember'));
		remember && this.setState({
			rememberSize: remember
		})
	}
	login = e => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {

				// 模拟生成一些数据
				this.props.setUserInfo(Object.assign({}, values, { role: { type: 1, name: '超级管理员' } }));
				localStorage.setItem('userInfo', JSON.stringify(Object.assign({}, values, { role: { type: 1, name: '超级管理员' } })));
				const that = this;
				this.setState({ loading: true });

				this.state.remember && localStorage.setItem('remember', JSON.stringify({ userName: values.userName, password: values.password, remember: this.state.remember }))
				APIService.login(values.userName, values.password).then(data => {
					if (data.data.code === 200) {
						// console.log('这是什么东西啊', data.data.data);
						localStorage.setItem('isLogin', '1');
						localStorage.setItem('userId', data.data.data.id);
						localStorage.setItem('account', data.data.data.account);
						localStorage.setItem('workShop', data.data.data.workShop);
						localStorage.setItem('userData', JSON.stringify(data.data.data));
						localStorage.setItem('userName', data.data.data.name);
						localStorage.setItem('menuList', JSON.stringify(data.data.data.menuList));
						localStorage.setItem('token', data.data.data.token);
						localStorage.setItem('department', data.data.data.department)
						localStorage.setItem('departmentId', data.data.data.departmentId)
						//2代表供应商
						localStorage.setItem('roleType', data.data.data.roleList.every(function (value, index, array) {
							return value.name !== '供应商';
						}) ? 1 : 2);

						that.props.history.push('/dashboard');
					} else {
						utils.openNotification('warning', data.data.msg)
					}
					this.setState({ loading: false });
				}).catch(res => {
					this.setState({ loading: false });
				}

				)

			} else {
				console.log(err);
			}
		});
	};
	componentDidMount() {
		window.addEventListener('resize', this.onResize);
	}
	componentWillUnmount() {
		window.addEventListener('resize', this.onResize);
		// componentWillMount进行异步操作时且在callback中进行了setState操作时，需要在组件卸载时清除state
		this.setState = () => {
			return;
		};
	}
	onResize() {
		this.setState({ clientHeight: document.documentElement.clientHeight || document.body.clientHeight });
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div className="container">
				<div className="bg" style={{ height: this.state.clientHeight - 5 + 'px', backgroundImage: `url(${require('@/assets/img/bg1.png')})` }}>

					<div className="content">
						<div style={{ marginBottom: '20px' }}>
							<img src={img} style={{ width: '120px', height: '48px' }}></img>
						</div>
						{/* <div><img style={{ width:"100%",height:'100%'}} alt='logo' src={require('@/assets/img/loginLogo.png')} /></div> */}
						<div className="title" style={{ marginBottom: '5px' }}>力劲智造(深圳领威)总装管理系统</div>
						<div style={{
							fontSize: '12px',
							fontFamily: ' Microsoft YaHei',
							fontWeight: 400,
							color: '#FFFFFF',
							opacity: '0.3',
							marginBottom: '30px'
						}}>L.K. Technology (Shenzhen Lingwei) management system</div>
						<Spin spinning={this.state.loading}>
							<div style={{ backgroundImage: "url('../assets/img/dlbg.png')", width: '500px', display: 'flex', justifyContent: 'center' }}>
								<div>
									<div style={{
										fontSize: '18px',
										fontFamily: 'Microsoft YaHei',
										fontWeight: 'bold',
										color: '#FFFFFF',
										marginBottom: '25px'
									}}>
										欢迎登录管理系统
									</div>
									<Form className="login-form" style={{ width: '400px' }}>
										<FormItem>
											{getFieldDecorator('userName', {
												initialValue: this.state.rememberSize ? this.state.rememberSize.userName : null,
												rules: [{ required: true, message: '请填写用户名！' }]
											})(<Input className='inputStyle radius1' prefix={<Icon type="user" style={{ color: 'white', fontSize: '25px', marginRight: '25px' }} />} placeholder="请输入账号" />)}
										</FormItem>
										<FormItem style={{ marginBottom: '10px' }}>
											{getFieldDecorator('password', {
												initialValue: this.state.rememberSize ? this.state.rememberSize.password : null,
												rules: [{ required: true, message: '请填写密码！' }]
											})(<Input.Password className='inputStyle radius2' prefix={<Icon type="lock" style={{ color: 'white', fontSize: '25px' }} />} placeholder="请输入密码" />)}
										</FormItem>
										<FormItem>
											<Checkbox onChange={(e) => { this.setState({ remember: e.target.checked }) }} defaultChecked={this.state.rememberSize ? this.state.rememberSize.remember : false}><span style={{
												fontSize: '14px',
												fontFamily: 'Microsoft YaHei',
												fontWeight: '400',
												color: '#FFFFFF'
											}}>记住密码</span></Checkbox>
										</FormItem>
										<FormItem>
											<Button style={{
												height: '55px',
												background: '#DB0929',
												borderRadius: "5px",
												fontSize: '16px',
												fontFamily: 'Microsoft YaHei',
												fontWeight: '400',
												color: '#FFFFFF',
												border: 'none',
												marginBottom: '50px',
											}}
												htmlType="submit"
												block
												onClick={this.login}>
												登&nbsp;&nbsp;&nbsp;&nbsp;录
											</Button>
										</FormItem>
									</Form>
									<div style={{
										fontSize: '12px',
										fontFamily: 'Microsoft YaHei',
										fontWeight: '400',
										color: '#FFFFFF',
										opacity: '0.3',
										textAlign: 'center',
										marginBottom: '-80px',
									}}>
										Copyright©2022. L.K. Technology Holdings Limited
									</div>
								</div>
							</div>
						</Spin>
					</div>

				</div>
			</div>
		);
	}
}

const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => ({
	setUserInfo: data => {
		dispatch(setUserInfo(data));
	}
});
export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Form.create()(Login));
